<?php
    $this->layout('base.phtml', [
        'title' => _('Registration'),
        'canonical' => url_full('registration'),
        'current_page' => 'registration',
        'back_options' => [
            'reset' => true,
            'track' => false,
        ],
        'has_errors' => $error || $errors,
    ]);
?>

<div class="section section--small">
    <div class="section__title">
        <h1><?= _('Registration') ?></h1>
    </div>

    <?php if ($subscriptions_enabled): ?>
        <p class="section__intro">
            <?= _f('First month is free. <a href="%s">Learn more about pricing.</a>', $subscriptions_host . '/tarifs') ?>
        </p>
    <?php endif; ?>

    <form method="post" action="<?= url('create user') ?>" data-controller="csrf-loader">
        <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>

        <div class="form-group <?= isset($errors['username']) ? 'form-group--invalid' : '' ?>">
            <label for="username">
                <?= _('How should we name you?') ?>
                <span class="label__help">
                    <?= _f('(public, max. %d characters)', 50) ?>
                </span>
            </label>

            <input
                id="username"
                name="username"
                type="text"
                value="<?= $username ?>"
                required
                maxlength="50"
                autofocus
                autocomplete="nickname"
                aria-describedby="username-desc"
            />

            <div id="username-desc">
                <?php if (isset($errors['username'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['username'] ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="form-group <?= isset($errors['email']) ? 'form-group--invalid' : '' ?>">
            <label for="email">
                <?= _('Your email address') ?>
            </label>

            <input
                id="email"
                name="email"
                type="email"
                value="<?= $email ?>"
                required
                autocomplete="email"
                aria-describedby="email-desc"
            />

            <div id="email-desc">
                <?php if (isset($errors['email'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['email'] ?>
                    </p>
                <?php endif; ?>

                <p class="form-group__caption">
                    <?= _('We only send emails necessary for the operation of the service, or in the event of a problem with your account.') ?>
                </p>
            </div>
        </div>

        <div class="form-group <?= isset($errors['password_hash']) ? 'form-group--invalid' : '' ?>">
            <label for="new-password">
                <?= _('And a password') ?>
                <span class="label__help">
                    <?= _('(recommended at least 8 characters)') ?>
                </span>
            </label>

            <div class="form-group__stack" data-controller="input-password">
                <input
                    id="new-password"
                    name="password"
                    type="password"
                    value="<?= $password ?>"
                    required
                    data-input-password-target="input"
                    autocomplete="new-password"
                    aria-describedby="password-desc"
                />

                <button
                    type="button"
                    class="no-mobile js-only"
                    data-action="input-password#toggle"
                    data-input-password-target="button"
                    aria-label="<?= _('Show password as plain text. Note: this will visually expose your password.') ?>"
                >
                    <?= icon('eye') ?>
                    <?= _('Show') ?>
                </button>
            </div>

            <div id="password-desc">
                <?php if (isset($errors['password_hash'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['password_hash'] ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="form-group">
            <input
                type="checkbox"
                id="accept-contact"
                name="accept_contact"
            />

            <label class="label--checkbox" for="accept-contact">
                <?= _('Accept to be contacted by email to help improve the service (optional).') ?>
            </label>
        </div>

        <?php if ($has_terms): ?>
            <div class="form-group form-group--terms <?= isset($errors['accept_terms']) ? 'form-group--invalid' : '' ?>">
                <div id="accept-terms-desc">
                    <?php if (isset($errors['accept_terms'])): ?>
                        <p class="form-group__error">
                            <span class="sr-only"><?= _('Error') ?></span>
                            <?= $errors['accept_terms'] ?>
                        </p>
                    <?php endif; ?>

                    <p class="form-group__caption">
                        <?= _f('Before going any further, please read <a href="%s" target="_blank">the general terms and conditions of service and use</a> to make sure they are suitable for you.', url('terms')) ?>
                    </p>
                </div>

                <input
                    type="checkbox"
                    id="accept-terms"
                    name="accept_terms"
                    required
                    aria-describedby="accept-terms-desc"
                />

                <label class="label--checkbox" for="accept-terms">
                    <?= _('I acknowledge that I have read and accepted the general terms and conditions of service and use') ?>
                </label>
            </div>
        <?php endif; ?>

        <div class="form__actions">
            <button type="submit" class="button--primary">
                <?= _('Sign up') ?>
            </button>
        </div>
    </form>

    <p class="paragraph--centered">
        <a href="<?= url('login') ?>">
            <?= _('Already an account?') ?>
        </a>
    </p>
</div>
